<template>
    <Header></Header>
    <!-- 主内容区域 -->
    <main class="container max-w-screen-xl mx-auto p-4">
        <!-- grid 表格布局，分为 4 列，元素间隔为 gap-4  -->
        <div class="grid grid-cols-4 gap-7">
            <!-- 左边栏，占用 3 列 -->
            <div class="col-span-4 md:col-span-3 mb-3 animate__animated animate__fadeInUp">
                <!-- 用户信息 -->
                <div
                    class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                    <div class="flex flex-row items-center justify-center">
                        <div class="basis-1/5 flex justify-center">
                            <!-- 用户头像 -->
                            <div class="relative">
                                <img class="w-16 h-16 md:w-28 md:h-28 rounded-full shadow" :src="userInformation.avatar" />
                            </div>
                        </div>
                        <div class="basis-4/5">
                            <div class=" flex flex-col">
                                <div class="flex flex-row gap-2 items-center p-4">
                                    <div class="flex items-center group flex-1">
                                        <!-- 博主昵称 -->
                                        <h5 class="text-base md:text-2xl font-semibold text-gray-900 dark:text-white">
                                            {{ userInformation.nickname }}
                                        </h5>
                                    </div>

                                    <!-- 第三方平台主页跳转（如 GitHub 等） -->
                                    <div v-if="userInformation && userInformation.github">
                                        <!-- GitHub -->
                                        <svg t="1734531512453" class="icon mr-3 w-7 h-7 hover:scale-110" @click="jump(userInformation.github)"
                                            data-tooltip-target="github" data-tooltip-placement="bottom"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="6705" width="200" height="200">
                                            <path
                                                d="M512 0C229.283787 0 0.142041 234.942803 0.142041 524.867683c0 231.829001 146.647305 428.553077 350.068189 497.952484 25.592898 4.819996 34.976961-11.38884 34.976961-25.294314 0-12.45521-0.469203-45.470049-0.725133-89.276559-142.381822 31.735193-172.453477-70.380469-172.453477-70.380469-23.246882-60.569859-56.816233-76.693384-56.816234-76.693385-46.493765-32.58829 3.540351-31.948468 3.540351-31.948467 51.356415 3.71097 78.356923 54.086324 78.356923 54.086324 45.683323 80.19108 119.817417 57.072162 148.993321 43.593236 4.649376-33.91059 17.915029-57.029508 32.50298-70.167195-113.675122-13.222997-233.151301-58.223843-233.1513-259.341366 0-57.285437 19.919806-104.163095 52.678715-140.846248-5.246544-13.265652-22.820334-66.626844 4.990615-138.884127 0 0 42.996069-14.076094 140.760939 53.787741 40.863327-11.644769 84.627183-17.445825 128.177764-17.6591 43.465272 0.213274 87.271782 6.014331 128.135109 17.6591 97.679561-67.906489 140.59032-53.787741 140.59032-53.787741 27.938914 72.257282 10.407779 125.618474 5.118579 138.884127 32.844219 36.683154 52.593405 83.560812 52.593405 140.846248 0 201.586726-119.646798 245.990404-233.663158 258.957473 18.341577 16.208835 34.721032 48.199958 34.721032 97.210357 0 70.167195-0.639822 126.7275-0.639823 143.960051 0 14.033439 9.213443 30.370239 35.190235 25.209005 203.250265-69.527373 349.769606-266.123484 349.769605-497.867175C1023.857959 234.942803 794.673558 0 512 0"
                                                fill="#3E75C3" p-id="6706"></path>
                                        </svg>

                                        <div id="github" role="tooltip"
                                            class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                            它的GitHub
                                            <div class="tooltip-arrow" data-popper-arrow></div>
                                        </div>
                                    </div>

                                    <div v-if="userInformation && userInformation.gitee">
                                        <!-- Gitee -->
                                        <svg t="1734531592151" class="icon mr-3 w-7 h-7 hover:scale-110" @click="jump(userInformation.gitee)"
                                            data-tooltip-target="gitee" data-tooltip-placement="bottom"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="5891" width="200" height="200">
                                            <path
                                                d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z"
                                                fill="#C71D23" p-id="5892"></path>
                                        </svg>
                                        <div id="gitee" role="tooltip"
                                            class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                            它的Gitee
                                            <div class="tooltip-arrow" data-popper-arrow></div>
                                        </div>
                                    </div>

                                    <div v-if="userInformation && userInformation.personBlog">
                                        <!-- 个人博客 -->
                                        <svg t="1734531738824" class="icon w-7 h-7 hover:scale-110" @click="jump(userInformation.personBlog)"
                                            data-tooltip-target="tooltip-blog" data-tooltip-placement="bottom"
                                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                                            p-id="10651" width="200" height="200">
                                            <path
                                                d="M1016.04693333 610.9184l41.54026667-101.51253333-41.54026667-99.08906667V302.83093333L938.46186667 225.28l-42.3936-101.1712-99.46453334-40.68693333-75.9808-76.01493334h-109.70453333L509.40586667-34.13333333l-99.08906667 41.54026666H302.83093333L225.28 84.95786667 124.1088 127.3856 83.42186667 226.85013333 7.40693333 302.83093333v109.6704L-34.13333333 514.01386667l41.54026666 99.1232v107.48586666l77.55093334 77.55093334 42.42773333 101.1712 99.46453333 40.68693333 75.9808 76.01493333h109.70453334l101.4784 41.54026667 99.1232-41.54026667h107.48586666l77.55093334-77.58506666 101.1712-42.3936 40.68693333-99.46453334 76.01493333-75.9808z"
                                                fill="#FFCC70" p-id="10652"></path>
                                            <path
                                                d="M697.51466667 176.9472A1365.7088 1365.7088 0 0 0 209.88586667 902.58773333a706.90133333 706.90133333 0 0 0 47.95733333-17.16906666A1365.9136 1365.9136 0 0 1 699.76746667 236.30506667a693.11146667 693.11146667 0 0 0-2.2528-59.35786667z"
                                                fill="#B18C25" p-id="10653"></path>
                                            <path
                                                d="M573.1328 469.33333333a478.5152 478.5152 0 0 0 245.41866667-73.216 480.256 480.256 0 0 0-30.72-288.01706666C495.4112 203.84426667 297.43786667 475.57973333 291.60106667 779.1616c47.37706667 5.4272 96.32426667 3.8912 145.6128-5.56373333 162.03093333-31.06133333 289.34826667-139.9808 350.75413333-280.576a729.56586667 729.56586667 0 0 1-214.8352-23.68853334z"
                                                fill="#FFFFFF" p-id="10654"></path>
                                            <path
                                                d="M346.14613333 793.1904c-18.56853333 0-37.34186667-1.05813333-55.808-3.1744l-9.86453333-1.1264 0.2048-9.9328A732.16 732.16 0 0 1 784.41813333 97.75786667l9.4208-3.10613334 3.95946667 9.1136c14.6432 33.65546667 25.53173333 68.7104 32.3584 104.27733334 12.11733333 63.31733333 11.81013333 127.31733333-0.9216 190.2592l-0.9216 4.57386666-3.95946667 2.49173334a487.59466667 487.59466667 0 0 1-168.3456 66.2528c-3.51573333 0.68266667-7.03146667 1.29706667-10.5472 1.91146666 46.7968 7.50933333 94.5152 10.41066667 142.09706667 8.56746667l17.37386667-0.68266667-6.9632 15.94026667a492.6464 492.6464 0 0 1-451.82293334 295.8336z m-43.38346666-23.8592a471.07413333 471.07413333 0 0 0 467.968-264.94293333c-3.6864 0.06826667-7.3728 0.06826667-11.0592 0.06826666-63.96586667 0-127.6928-8.26026667-189.37173334-24.61013333l-75.02506666-19.8656 77.58506666-1.60426667a466.0224 466.0224 0 0 0 235.86133334-69.05173333c11.29813333-58.6752 11.264-118.272-0.03413334-177.22026667a472.95146667 472.95146667 0 0 0-27.0336-90.45333333A710.51946667 710.51946667 0 0 0 302.76266667 769.3312z"
                                                fill="#CFA41E" p-id="10655"></path>
                                            <path
                                                d="M366.592 793.1904c-18.56853333 0-37.34186667-1.05813333-55.808-3.1744l-9.86453333-1.1264 0.2048-9.9328A732.2624 732.2624 0 0 1 804.864 97.72373333l9.4208-3.10613333 3.95946667 9.1136c14.6432 33.62133333 25.53173333 68.7104 32.3584 104.27733333 12.11733333 63.2832 11.81013333 127.31733333-0.9216 190.2592l-0.9216 4.57386667-3.95946667 2.49173333a487.59466667 487.59466667 0 0 1-168.3456 66.2528c-3.51573333 0.68266667-7.03146667 1.29706667-10.5472 1.91146667a728.3712 728.3712 0 0 0 142.09706667 8.6016l17.37386666-0.68266667-6.9632 15.94026667a492.6464 492.6464 0 0 1-451.82293333 295.8336z m-43.4176-23.8592a471.07413333 471.07413333 0 0 0 467.968-264.94293333 741.30773333 741.30773333 0 0 1-200.3968-24.54186667l-75.02506667-19.8656 77.58506667-1.60426667a466.0224 466.0224 0 0 0 235.86133333-69.05173333 466.8416 466.8416 0 0 0-0.03413333-177.22026667 472.95146667 472.95146667 0 0 0-27.0336-90.45333333 710.5536 710.5536 0 0 0-478.9248 647.68z"
                                                fill="#B18C25" p-id="10656"></path>
                                            <path
                                                d="M787.83146667 108.10026667a480.256 480.256 0 0 1 30.72 288.01706666 477.25226667 477.25226667 0 0 1-245.41866667 73.216c32.63146667 8.63573333 66.01386667 15.0528 99.9424 19.08053334 37.71733333 4.5056 76.11733333 6.07573333 114.8928 4.608-61.40586667 140.56106667-188.7232 249.51466667-350.75413333 280.576a481.04106667 481.04106667 0 0 1-145.6128 5.56373333c5.8368-303.58186667 203.81013333-575.31733333 496.2304-671.06133333"
                                                fill="#FFCC70" p-id="10657"></path>
                                            <path
                                                d="M346.14613333 793.1904c-18.56853333 0-37.34186667-1.05813333-55.808-3.1744l-9.86453333-1.1264 0.2048-9.9328A732.16 732.16 0 0 1 784.41813333 97.75786667l29.86666667-3.10613334-16.45226667 9.1136c14.6432 33.62133333 25.53173333 68.7104 32.3584 104.27733334 12.11733333 63.2832 11.81013333 127.31733333-0.9216 190.2592l-0.9216 4.57386666-3.95946666 2.49173334a487.59466667 487.59466667 0 0 1-168.3456 66.2528c-3.51573333 0.68266667-7.03146667 1.29706667-10.5472 1.91146666a728.3712 728.3712 0 0 0 142.09706666 8.6016l17.37386667-0.68266666-6.9632 15.94026666a492.6464 492.6464 0 0 1-451.85706667 295.79946667z m-43.38346666-23.8592a471.07413333 471.07413333 0 0 0 467.968-264.94293333 741.30773333 741.30773333 0 0 1-200.3968-24.54186667l-75.02506667-19.8656 77.58506667-1.60426667a466.0224 466.0224 0 0 0 235.86133333-69.05173333 466.8416 466.8416 0 0 0-0.03413333-177.22026667 472.95146667 472.95146667 0 0 0-27.0336-90.45333333A710.48533333 710.48533333 0 0 0 302.76266667 769.3312z"
                                                fill="#B18C25" p-id="10658"></path>
                                            <path
                                                d="M716.42453333 199.44106667c-217.25866667 183.97866667-385.57013333 419.0208-489.30133333 697.4464l83.8656-32.01706667c80.34986667-254.60053333 198.5536-443.93813333 406.016-612.11306667 0.06826667-19.6608 0.98986667-33.45066667-0.58026667-53.31626666z"
                                                fill="#B18C25" p-id="10659"></path>
                                            <path
                                                d="M714.752 171.24693333A1365.57226667 1365.57226667 0 0 0 227.1232 896.85333333a706.90133333 706.90133333 0 0 0 47.95733333-17.16906666A1365.9136 1365.9136 0 0 1 717.0048 230.57066667c0.06826667-19.6608-0.68266667-39.45813333-2.2528-59.32373334z"
                                                fill="#EDEEEE" p-id="10660"></path>
                                        </svg>
                                        <div id="tooltip-blog" role="tooltip"
                                            class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white transition-opacity duration-300 bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                            它的博客
                                            <div class="tooltip-arrow" data-popper-arrow></div>
                                        </div>
                                    </div>

                                </div>

                                <div class="flex items-center pl-4">
                                    <span
                                        v-if="userInformation && userInformation.sex != null && userInformation.sex == 2"
                                        class="bg-green-100 text-green-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300">
                                        <svg t="1734533132037" class="icon w-5 h-5 inline" viewBox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18950" width="200"
                                            height="200">
                                            <path
                                                d="M511.994883 1.086751c-281.458323 0-510.439458 228.981135-510.439458 510.439458 0 281.46344 228.981135 510.444575 510.439458 510.444575 281.46344 0 510.444575-228.981135 510.444575-510.444575C1022.439458 230.067886 793.458323 1.086751 511.994883 1.086751zM511.994883 1012.605485c-276.290627 0-501.07416-224.782509-501.07416-501.078253 0-276.290627 224.782509-501.07416 501.07416-501.07416 276.295743 0 501.078253 224.782509 501.078253 501.07416C1013.073136 787.821953 788.290627 1012.605485 511.994883 1012.605485z"
                                                fill="#19c41c" p-id="18951"></path>
                                            <path
                                                d="M478.349599 356.082928c-4.882194 3.66139-6.101975 7.933693-3.66139 12.814864 0 1.220804 1.220804 3.050476 3.66139 5.492084 19.527752 30.512944 33.562397 57.363476 42.10598 80.551594 1.220804 4.882194 4.272303 6.101975 9.153474 3.66139 4.882194-3.66139 7.322779-7.933693 7.322779-12.814864-13.425777-30.511921-28.681226-58.583257-45.768393-84.212984C487.503073 356.693842 483.231793 354.862123 478.349599 356.082928z"
                                                fill="#19c41c" p-id="18952"></path>
                                            <path
                                                d="M311.754327 535.494087c42.716894-50.039673 66.515926-98.248651 71.39812-144.626935 0-6.101975-2.440585-9.763364-7.322779-10.984169-6.101975 0-9.763364 3.050476-10.984169 9.153474-4.882194 47.599088-26.850531 92.756567-65.906036 135.473461-3.66139 4.882194-3.050476 9.153474 1.830695 12.814864C304.431547 539.765367 308.092937 539.155477 311.754327 535.494087z"
                                                fill="#19c41c" p-id="18953"></path>
                                            <path
                                                d="M309.922608 420.158269c6.101975 0 9.153474-3.66139 9.153474-10.984169l0-45.768393c0-15.866363 7.322779-23.799032 21.968337-23.799032l333.191568 0c28.071336 1.220804 32.95353 26.239618 14.646582 75.05951-2.440585 6.101975-1.220804 10.373255 3.66139 12.814864 6.101975 2.440585 10.374278 0.610914 12.814864-5.492084 12.204973-28.071336 16.476253-51.260477 12.814864-69.567425-6.101975-19.527752-18.306948-29.90203-36.613896-31.122835L518.625908 321.298703c-2.440585-14.645558-6.101975-26.850531-10.984169-36.613896-3.66139-4.882194-7.933693-7.322779-12.814864-7.322779-4.882194 2.440585-6.711865 6.712889-5.492084 12.814864 3.66139 7.322779 7.322779 17.697057 10.984169 31.121811L341.045443 321.298703c-26.850531 1.220804-40.886199 10.984169-42.107003 29.29214l0 58.583257C298.93844 416.496879 302.599829 420.158269 309.922608 420.158269z"
                                                fill="#19c41c" p-id="18954"></path>
                                            <path
                                                d="M646.776589 423.819658c-3.66139-4.882194-8.543583-5.492084-14.645558-1.830695-3.66139 3.66139-3.66139 7.93267 0 12.814864 32.952506 43.937698 57.362452 88.485287 73.228815 133.642766 2.440585 6.101975 6.712889 7.93267 12.814864 5.492084 6.101975-3.66139 7.93267-8.543583 5.492084-14.645558C704.139042 514.134617 678.509315 468.978161 646.776589 423.819658z"
                                                fill="#19c41c" p-id="18955"></path>
                                            <path
                                                d="M683.390485 592.246649c-7.322779 0-10.984169 3.051499-10.984169 9.153474l0 75.05951c2.440585 18.306948-8.543583 26.240641-32.952506 23.800056L518.625908 700.259688 518.625908 592.246649l47.599088 0c46.378284 2.440585 71.39812-29.291117 75.05951-95.197152 0-6.101975-3.050476-9.763364-9.153474-10.984169-6.101975 0-9.153474 3.050476-9.153474 9.153474-1.220804 56.142671-21.968337 82.382289-62.244646 78.720899l-58.583257 0c-20.748556-2.440585-34.783201-10.984169-42.107003-25.629727 72.009034-31.732725 129.981377-88.484264 173.919075-170.257685 2.440585-6.101975 1.220804-10.984169-3.66139-14.645558-6.101975-2.440585-10.984169-0.60989-14.645558 5.492084-37.835723 75.670423-92.145653 129.981377-162.934906 162.933883-2.440585-8.543583-3.66139-19.527752-3.66139-32.952506L449.058482 383.544373c0-7.322779-3.050476-10.984169-9.153474-10.984169-6.101975 0-9.153474 3.66139-9.153474 10.984169l0 115.335818c1.220804 24.409946 2.440585 37.8347 3.66139 40.276309-29.291117 12.204973-73.838705 22.578228-133.642766 31.121811-6.101975 1.220804-8.543583 4.272303-7.322779 9.153474 1.220804 4.882194 4.882194 7.322779 10.984169 7.322779 43.937698-6.101975 89.705068-17.087167 137.304156-32.952506 8.543583 23.189142 28.071336 36.004005 58.583257 38.444591l0 108.013039L370.33656 700.259688c-14.645558 0-21.968337-8.543583-21.968337-25.63075l0-67.73673c0-6.101975-3.050476-9.763364-9.153474-10.984169-6.102998 1.220804-9.153474 4.882194-9.153474 10.984169l0 73.228815c1.220804 23.189142 12.814864 36.004005 34.784224 38.445614l291.084565 0c23.189142-1.220804 35.394115-13.425777 36.614919-36.613896L692.544983 601.400123C692.544983 595.298148 689.493483 592.246649 683.390485 592.246649z"
                                                fill="#19c41c" p-id="18956"></path>
                                        </svg>
                                        神秘特工
                                    </span>
                                    <span
                                        v-if="userInformation && userInformation.sex != null && userInformation.sex == 1"
                                        class="bg-blue-100 text-blue-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300">
                                        <svg t="1734532940642" class="icon w-5 h-5 inline" viewBox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12784" width="200"
                                            height="200">
                                            <path
                                                d="M390.86 463a21.32 21.32 0 0 1-3.12-42.42 193.14 193.14 0 0 1 28.38-2.08 21.32 21.32 0 1 1 0 42.65 148.54 148.54 0 0 0-22.12 1.57 23.36 23.36 0 0 1-3.14 0.28zM245.53 631.68a21.31 21.31 0 0 1-21.32-21.32 192 192 0 0 1 83.38-158.28 21.32 21.32 0 1 1 24.16 35.15 149.36 149.36 0 0 0-64.89 123.13 21.31 21.31 0 0 1-21.33 21.32zM606.11 439.21a21.32 21.32 0 0 1-15.11-36.4l226.22-226.18a21.32 21.32 0 1 1 30.15 30.15L621.19 433a21.25 21.25 0 0 1-15.08 6.21z"
                                                fill="#70C3F2" p-id="12785"></path>
                                            <path
                                                d="M425.2 876a277.19 277.19 0 0 1-196-473.19A277.19 277.19 0 1 1 425.2 876z m0-511.73A233 233 0 0 0 259.34 433a234.54 234.54 0 1 0 165.86-68.7z m-180.94 53.62zM854.68 446.52a21.31 21.31 0 0 1-21.32-21.32V206.26a15.62 15.62 0 0 0-15.62-15.62H598.8a21.32 21.32 0 0 1 0-42.65h218.94A58.32 58.32 0 0 1 876 206.26V425.2a21.31 21.31 0 0 1-21.32 21.32z"
                                                fill="#70C3F2" p-id="12786"></path>
                                        </svg>
                                        帅气大男孩
                                    </span>
                                    <span
                                        v-if="userInformation && userInformation.sex != null && userInformation.sex == 0"
                                        class="bg-pink-100 text-pink-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300">
                                        <svg t="1734532802983" class="icon w-5 h-5 inline" viewBox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="12623" width="200"
                                            height="200">
                                            <path
                                                d="M384.13 881.11L142.89 639.87A21.32 21.32 0 0 1 173 609.71L414.29 851a21.32 21.32 0 0 1-30.16 30.16z"
                                                fill="#FF80B4" p-id="12624"></path>
                                            <path
                                                d="M173 851a21.31 21.31 0 0 1 0-30.16l241.29-241.28a21.32 21.32 0 1 1 30.16 30.16L203.2 851a21.31 21.31 0 0 1-30.2 0z"
                                                fill="#FF80B4" p-id="12625"></path>
                                            <path
                                                d="M414.29 609.71c-108.08-108.08-108.08-283.94 0-392s283.94-108.08 392 0 108.08 283.94 0 392-283.93 108.08-392 0z m361.86-361.86c-91.45-91.45-240.26-91.45-331.71 0s-91.45 240.26 0 331.71 240.26 91.45 331.71 0 91.45-240.26 0-331.71z"
                                                fill="#FF80B4" p-id="12626"></path>
                                            <path
                                                d="M696.67 291.61a21.32 21.32 0 0 1 27.78-32.2A193.14 193.14 0 0 1 746 278a21.32 21.32 0 1 1-30.16 30.16 148.54 148.54 0 0 0-16.77-14.47 23.36 23.36 0 0 1-2.4-2.08zM474.6 308.16a21.31 21.31 0 0 1 0-30.16 192 192 0 0 1 170.88-53 21.32 21.32 0 0 1-7.78 42 149.36 149.36 0 0 0-132.95 41.18 21.31 21.31 0 0 1-30.15-0.02z"
                                                fill="#FF80B4" p-id="12627"></path>
                                        </svg>
                                        美丽小姐姐
                                    </span>
                                    <span class="mr-3 ml-1">|</span>
                                    <span
                                        class="bg-indigo-100 text-indigo-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300">
                                        <svg t="1734533265304" class="icon w-5 h-5 inline" viewBox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25764" width="200"
                                            height="200">
                                            <path
                                                d="M945.4 383.3l-399-204.6c-23.7-12.1-51.9-12.1-75.5 0.2L77.2 383.4c-9.8 5.1-15.8 15.1-15.8 26.1 0 11 6.1 21 15.8 26.1l37.5 19.5v193.5c-14.8 8.3-25 24-25 42.2 0 26.8 21.7 48.5 48.5 48.5s48.5-21.7 48.5-48.5c0-18.2-10.1-33.9-25-42.2v-169l104.5 54.3V746c0 25.7 16.5 48.2 41 56L432 841.7c25.6 8.1 52 12.2 78.3 12.2 25.3 0 50.6-3.7 75.2-11.2l134.1-40.8c24.8-7.6 41.6-30.1 41.7-56l0.8-216.2 183.3-94c9.9-5.1 16-15.1 16-26.1-0.1-11.2-6.2-21.2-16-26.3zM714.2 745.7c0 5.2-3.4 9.7-8.3 11.2l-134.1 40.8c-41.2 12.5-84.6 12.2-125.7-0.8l-124.7-39.6c-4.9-1.6-8.2-6.1-8.2-11.2v-188L470.9 640c11.9 6.2 24.9 9.3 37.9 9.3 12.9 0 25.8-3 37.6-9.1l168.5-86.4-0.7 191.9zM525 598.4c-10.1 5.2-22.2 5.2-32.3-0.1L129 409.4l363.6-188.8c10.1-5.3 22.2-5.3 32.3-0.1l368.4 188.9-368.3 189z"
                                                fill="#8992c8" p-id="25765"></path>
                                        </svg>
                                        {{ (userInformation && userInformation.university) ? userInformation.university
                                        : "折纸大学" }}
                                    </span>
                                    <span class="mr-3 ml-1">|</span>
                                    <span
                                        class="bg-purple-100 text-purple-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300">
                                        <svg t="1734533520454" class="icon w-5 h-5 inline" viewBox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="32586" width="200"
                                            height="200">
                                            <path
                                                d="M512 65.290005C265.289062 65.290005 65.291029 265.288039 65.291029 511.998977S265.289062 958.707948 512 958.707948 958.708971 758.710938 958.708971 512 758.710938 65.290005 512 65.290005z m0 877.465623c-237.899248 0-430.755628-192.856379-430.755628-430.755628S274.099728 81.244372 512 81.244372 942.755628 274.099728 942.755628 512 749.899248 942.755628 512 942.755628z"
                                                fill="#9c71b5" p-id="32587"></path>
                                            <path
                                                d="M759.084445 735.354997H264.915555l87.402629-155.336857h47.697325c5.677303 0 10.278087 4.52199 10.278088 10.105148 0 5.580089-4.600785 10.103102-10.278088 10.103103h-35.580356l-64.655556 114.917286h424.439782l-64.655555-114.917286H624.37437c-5.676279 0-10.278087-4.523013-10.278087-10.103103 0-5.583159 4.601808-10.105149 10.278087-10.105148h47.308469l87.401606 155.336857zM468.512556 417.415808c0-23.576975 19.504216-42.75578 43.481304-42.755779 23.984251 0 43.500746 19.179828 43.500747 42.755779 0 23.580045-19.516496 42.75885-43.500747 42.75885-23.977088 0-43.481304-19.179828-43.481304-42.75885z m107.538226 0c0-34.720779-28.734438-62.969147-64.056922-62.969147-35.311227 0-64.037479 28.248368-64.037478 62.969147 0 34.723849 28.727275 62.969147 64.037478 62.969147 35.323507 0 64.056921-28.246321 64.056922-62.969147z m-64.052829-108.561531c63.249533 0 114.704438 50.591235 114.704439 112.769366 0 86.159312-88.838328 182.961008-114.78835 209.397101-26.024723-25.958208-114.609271-120.829949-114.609271-209.397101 0-62.178131 51.450812-112.769366 114.693182-112.769366z m-7.017834 343.822696l7.105839 6.523577 7.021927-6.613628c5.232165-4.924149 128.150682-121.92591 128.150682-230.964302 0-73.327052-60.676941-132.97864-135.260614-132.978641-74.576509 0-135.249357 59.651588-135.249357 132.978641 0 111.980397 122.996289 226.241744 128.231523 231.054353z"
                                                fill="#9c71b5" p-id="32588"></path>
                                        </svg>
                                        {{ (userInformation && userInformation.localCity)? userInformation.localCity :
                                        "地球村" }}
                                    </span>
                                </div>

                                <div class="mt-4 pb-2 pl-4">
                                    <!-- 个人签名 -->
                                    <span
                                        class="bg-purple-100 text-purple-800 text-xs md:text-sm font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-purple-400 border border-purple-400"
                                        data-tooltip-target="introduction" data-tooltip-placement="bottom">
                                        <svg t="1734533608910" class="icon w-5 h-5 inline" viewBox="0 0 1024 1024"
                                            version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="34778" width="200"
                                            height="200">
                                            <path
                                                d="M48.938348 890.055267l160.166718-162.607803a32.915284 32.915284 0 1 1 47.010585 46.301883L95.870189 936.35715a32.836539 32.836539 0 0 1-46.616862 0.314979 32.994029 32.994029 0 0 1-0.314979-46.616862zM119.651088 568.068194c-32.285326-18.898728-42.049669-41.813435-44.490755-57.719864-2.362341-15.512706-0.157489-39.608583 24.095878-66.303036 47.246819-52.207735 126.385242-135.834605 150.087396-160.796675 5.905852-34.01771 25.749516-147.8038 39.608583-217.650348 5.19715-25.828261 20.237388-46.853096 41.419712-57.48363 21.024835-10.709279 45.829415-10.315556 69.846548 0.866192 64.570653 30.316709 169.301102 81.815742 200.090279 97.013469 34.647667-4.252214 153.079694-18.42626 222.768753-25.513283a74.492485 74.492485 0 0 1 60.633418 21.733537c16.772621 16.93011 25.355793 41.104733 22.835963 64.649398-7.402002 70.870229-22.048516 189.381001-26.379474 223.634944 14.804003 31.34039 65.988058 139.535606 95.517319 205.051196 14.646514 32.285326 8.819406 56.223715 1.417405 70.71274a72.681357 72.681357 0 0 1-51.420288 37.403731c-68.192909 13.386599-187.727362 34.175199-222.768753 40.159797-25.277048 24.253367-110.557557 105.596641-162.135335 152.84346-20.867345 19.134962-40.159796 24.253367-54.727566 24.253367a62.995759 62.995759 0 0 1-9.843087-0.787447c-15.118982-2.362341-36.852519-11.811705-54.097608-42.364648a12405.597333 12405.597333 0 0 1-109.140153-200.641492c-29.922986-16.615131-131.503647-72.917591-193.23949-109.061408z m33.309008-56.932417c72.051399 42.128414 199.224088 112.28994 200.405258 112.998643 5.590874 3.071043 10.236811 7.71698 13.229109 13.386598 0.708702 1.33866 72.130144 135.440882 112.998643 207.886005a33.072773 33.072773 0 0 0 7.087023 9.370619 33.151518 33.151518 0 0 0 9.528108-6.693299c60.239695-55.121289 167.332485-157.725632 168.356166-158.749313a32.994029 32.994029 0 0 1 17.245089-8.661917c1.496149-0.314979 151.819779-26.221985 231.115691-41.73469 3.149788-0.551213 5.039661-1.968617 5.512129-2.834809 0.472468-0.944936 0.944936-5.19715-2.834809-13.386599-34.332689-76.224868-98.430873-211.193282-99.139576-212.610687a32.994029 32.994029 0 0 1-2.913554-18.190025c0.157489-1.574894 18.819983-149.536183 27.4819-231.903138a14.646514 14.646514 0 0 0-4.094724-11.260492 8.268193 8.268193 0 0 0-7.244512-2.67732c-81.10704 8.189449-229.619542 26.379474-231.115691 26.536964a33.072773 33.072773 0 0 1-18.662494-3.149788c-1.259915-0.629958-132.291094-65.3581-207.64977-100.793214C367.066931 66.306974 362.657228 65.677016 360.137398 66.858186c-2.834809 1.496149-5.35464 5.984597-6.53581 11.575471-16.142663 81.579508-40.711009 224.422391-40.947243 225.839796a32.994029 32.994029 0 0 1-8.661917 17.0876c-0.944936 1.102426-100.55698 105.91162-155.914504 166.938761-6.220831 6.850789-7.71698 11.181747-7.71698 11.969195 0.314979 1.102426 3.307277 5.512129 12.599152 10.866768z"
                                                p-id="34779" fill="#bc77e3"></path>
                                            <path
                                                d="M684.801791 451.762274a32.994029 32.994029 0 1 1 46.695606 46.459372l-23.938388 24.095878a32.836539 32.836539 0 0 1-46.616862 0 32.994029 32.994029 0 0 1-0.078744-46.538117l23.938388-24.017133zM515.658178 329.707991a32.836539 32.836539 0 0 1-46.695606 0.157489 32.994029 32.994029 0 0 1 0-46.695606l23.859643-24.017133a32.994029 32.994029 0 0 1 46.774351 46.538117l-23.938388 24.017133zM456.442165 398.530858c17.796302 3.85849 29.056794 21.418558 25.198303 39.21486-0.078745 0.236234-5.039661 27.009432 11.811705 43.939542 16.457642 16.457642 41.262222 11.811705 42.915861 11.417981a33.072773 33.072773 0 0 1 14.725259 64.255674c-6.299576 1.496149-14.646514 2.51983-24.017134 2.51983-24.174623 0-55.672502-6.929533-80.319592-31.655368-33.86022-34.096455-34.568923-81.736997-29.608007-104.57296a32.994029 32.994029 0 0 1 39.293605-25.198304z"
                                                p-id="34780" fill="#bc77e3"></path>
                                        </svg>
                                        {{
                                        (userInformation &&
                                        userInformation.signature) ? userInformation.signature : "该用户很懒，还没有自己的签名哦！"
                                        }}</span>

                                    <div id="introduction" role="tooltip"
                                        class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                        个性签名
                                        <div class="tooltip-arrow" data-popper-arrow></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center justify-center">
                    <div
                        class="w-full py-5 px-8 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <el-descriptions title="用户信息" :column="isMobile ? 1 : 3">
                            <template #extra>
                                <el-button v-if="isCurrentUser()" type="primary"
                                    @click="goUserMessageManage">编辑信息</el-button>
                            </template>
                            <el-descriptions-item label="UID">{{ userInformation.userId }}</el-descriptions-item>
                            <el-descriptions-item label="用户名">{{ userInformation.username }}</el-descriptions-item>
                            <el-descriptions-item label="昵称">{{ userInformation.nickname }}</el-descriptions-item>
                            <el-descriptions-item label="邮箱">{{ userInformation.mail }}</el-descriptions-item>
                            <el-descriptions-item label="QQ号">{{ (userInformation && userInformation.qqId) ?
                                userInformation.qqId : "未绑定" }}</el-descriptions-item>
                            <el-descriptions-item label="手机号">{{ (userInformation && userInformation.phoneNumber) ?
                                userInformation.phoneNumber : "未绑定" }}</el-descriptions-item>

                            <el-descriptions-item label="学校">
                                {{ (userInformation && userInformation.university) ? userInformation.university : "折纸大学"
                                }}
                            </el-descriptions-item>
                            <el-descriptions-item label="生日">{{ userInformation.birthday }}</el-descriptions-item>
                            <el-descriptions-item label="注册时间">{{ (userInformation && userInformation.registerTime) ?
                                userInformation.registerTime.split(' ').splice(0, 1).join() : "未知"
                                }}</el-descriptions-item>
                            <el-descriptions-item label="个人介绍">
                                {{ userInformation.introduce }}
                            </el-descriptions-item>
                        </el-descriptions>
                    </div>
                </div>

                <div>
                    <div
                        class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <div>
                            <el-row class="mx-4">
                                <el-col :span="8">
                                    <el-countdown title="今天还剩下(距离明天)" format="HH时mm分ss秒" :value="todayRemain" />
                                    <div
                                        class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-green-400 border border-green-400">
                                        今天是 {{ todayDate }} {{ weekdays[todayFestival.weekday] }} <br>
                                        <!-- <span v-if="todayFestival.dayType == 2 || todayFestival.dayType == 3"></span> -->
                                        <span>农历</span>
                                        {{ todayFestival.message }}
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <el-countdown title="这周还剩下(距离下周)" format="DD [天] HH时mm分ss秒" :value="weekRemain" />
                                    <div v-if="todayFestival.dayType == 0"
                                        class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-indigo-400 border border-indigo-400">
                                        虽然今天不是周末，也不是节日，但是还是要开心哟！
                                    </div>
                                    <div v-if="todayFestival.dayType == 1"
                                        class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-pink-400 border border-pink-400">
                                        今天是周末哦！要好好休息，毕竟休息好了才有动力呀！
                                    </div>
                                    <div v-if="todayFestival.dayType == 2 || todayFestival.dayType == 3"
                                        class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-purple-400 border border-purple-400">
                                        今天是 {{ todayFestival.message }}, 祝宝 {{ todayFestival.message }} 节日快乐！
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <el-countdown format="DD [天] HH时mm分ss秒" :value="yearRemain">
                                        <template #title>
                                            <div style="display: inline-flex; align-items: center">
                                                <el-icon style="margin-right: 4px" :size="10">
                                                    <Calendar />
                                                </el-icon>
                                                跨年倒计时
                                            </div>
                                        </template>
                                    </el-countdown>
                                    <div v-if="todayDate && nextYear && nextYear.preDate && nextYear.yearDate && (todayDate == nextYear.preDate || todayDate == nextYear.yearDate)"
                                        class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-red-400 border border-red-400">
                                        让我们相约在{{ nextYear.preDate }} 与 {{ nextYear.yearDate }} 的跨年烟花晚会，祝宝 {{
                                        nextYear.newYear }} 新年快乐！
                                    </div>
                                    <div v-else
                                        class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-blue-400 border border-blue-400">
                                        樱开盛景映心芙，水漾清波志守卡。<br>正道长行昭义洛，花繁勇进梦趋斯。
                                    </div>
                                </el-col>
                            </el-row>
                            <div class="flex items-center mx-5 p-4 mt-4 text-sm text-pink-800 rounded-lg bg-pink-100 dark:bg-gray-800 dark:text-pink-400"
                                role="alert">
                                <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true"
                                    xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                    <path
                                        d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                                </svg>
                                <span class="sr-only">Info</span>
                                <div>
                                    <span class="font-bold mr-4">生日提醒: </span> 
                                    <span v-if="userInformation && userInformation.birthday && userInformation.birthday.split('-').splice(1, 3).join('-') == todayFestival.day">
                                        今天是宝宝 [{{ userInformation.nickname }}] 生日，又长大了一岁，祝宝生日快乐！ Happy Birthday!
                                    </span>
                                    <span v-else>
                                        今天是{{ todayDate }} ,[{{ userInformation.nickname }}]的生日在{{ nextBirthDate }} ,距离[{{ userInformation.nickname }}]的生日还有 {{ birthdayRemainDay }} 天!
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex items-center">
                    <div
                        class="w-full py-5 px-2 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
                        <div class="flex flex-row items-center justify-center">
                            <el-calendar>
                                <template #date-cell="{ data }">
                                    <div class="flex flex-col items-center justify-center">
                                        <div class=""
                                            :class="data.isSelected ? 'is-selected inline-flex items-center justify-center w-8 h-8 font-semibold text-blue-800 bg-blue-200 rounded-full' : ''">
                                            {{ data.day.split('-')[2] }}</div>
                                        <div
                                            :class="isFestival(data) ? 'bg-purple-100 text-purple-800 text-xs font-medium px-1.5 py-0.5 rounded-full dark:bg-purple-900 dark:text-purple-300' : 'bg-gray-100 text-gray-800 text-xs font-medium px-1.5 py-0.5 rounded-full dark:bg-gray-700 dark:text-gray-300'">
                                            {{
                                            solarToLunar(data) }}</div>
                                    </div>
                                </template>
                            </el-calendar>
                        </div>
                    </div>
                </div>
                <div>
                </div>
            </div>

            <!-- 右边侧边栏，占用一列 -->
            <aside class="col-span-4 md:col-span-1 animate__animated animate__fadeInUp">
                <div class="sticky top-[5.5rem]">
                    <UserInfoCard></UserInfoCard>
                    <CategoryCard></CategoryCard>
                    <TagCard></TagCard>
                </div>
            </aside>
        </div>
    </main>
    <!-- 页脚 -->
    <Footer></Footer>
</template>

<script setup>
import Header from './components/Header.vue';
import Footer from './components/Footer.vue';
import { ref, onMounted, watch, onBeforeUnmount } from 'vue';
import { getArticlePageList } from '@/api/frontend/article';
import { showMessage } from '@/composables/utils';
import UserInfoCard from './components/UserInfoCard.vue';
import CategoryCard from './components/CategoryCard.vue';
import TagCard from './components/TagCard.vue';
import { useRoute, useRouter } from 'vue-router';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import { useUserStore } from '@/stores/user';
import { getStatisticsInfo } from '@/api/frontend/statistics';
import CountTo from '@/components/CountTo.vue';
import { useBlogSettingsStore } from '@/stores/blogsettings'
import { initTooltips } from 'flowbite';
import calendar from 'js-calendar-converter';
import { getUserDetailInfoById } from '@/api/frontend/user';
import { getToken } from '@/composables/auth';
import { Calendar } from '@element-plus/icons-vue'
import chineseCalendar from 'chinese-calendar'
import { column } from 'element-plus/es/components/table-v2/src/common';
const router = useRouter()
const route = useRoute()

// 用户屏幕是否为移动端
const isMobile = ref(false)

// 初始化 Flowbit 组件
onMounted(() => {
    initFlowbite();
    initTooltips();
    // 创建监听屏幕宽度监听事件
    // 监听屏幕宽度，判断是否为移动端
    window.addEventListener('resize', () => {
        isMobile.value = window.innerWidth < 768
        isMobile.value = document.documentElement.clientWidth < 768
    })
    // 获取手机屏幕宽度
    isMobile.value = document.documentElement.clientWidth < 768
})

// 销毁事件
onBeforeUnmount(() => {
    window.removeEventListener('resize', () => {
        isMobile.value = window.innerWidth < 768
        isMobile.value = document.documentElement.clientWidth < 768
    })
})

// 引入博客设置信息 store
const blogSettingsStore = useBlogSettingsStore()
// 引入用户相关信息
const userStore = useUserStore()
// 跳转页面
const jump = (url) => {
    // 在新窗口访问新的链接地址
    window.open(url, '_blank');
} 

const userInformation = ref({})

// 获取用户详细信息
const getUserInformation = (userId) => {
    // 构造请求体
    let params = {
        userId: userId
    }

    // 发送请求
    getUserDetailInfoById(params).then(res => {
        if (res.success == true) {
            userInformation.value = res.data
        } else {
            showMessage(res.message, 'error')
        }
    })
}
// 获取用户信息
getUserInformation(route.params.userId)

// 监听路由改变则刷新页面数据
watch(route, (newRoute, oldRoute) => {
    getUserInformation(newRoute.params.userId)
})

// 今日还剩余时间
const today = dayjs()
console.log()
console.log(today.format('YYYY-MM-DD HH:mm:ss'))

// 计算今日倒计时
const calcToday = () => {
    // 计算今日剩余时间
    let today = dayjs()
    let todayEnd = today.endOf('day')
    let todayRemain = todayEnd.diff(today)
    // 更新今日信息
    todayMessage()
    // 更新今日日期
    todayDate.value = today.format('YYYY年MM月DD日')
    return todayRemain
}

// 计算本周剩余时间
const calcWeek = () => {
    // 计算本周剩余时间
    let week = dayjs()
    let weekEnd = week.endOf('week')
    let weekRemain = weekEnd.diff(week)
    return weekRemain
}
const nextYear = ref({
    preDate: '',
    yearDate: '',
    newYear: ''
})
// 计算本年剩余时间
const calcYear = () => {
    // 计算本年剩余时间
    let year = dayjs()
    let yearEnd = year.endOf('year')
    let yearRemain = yearEnd.diff(year)
    // 更新本年信息
    nextYear.value.preDate = getThisYearDate()
    nextYear.value.yearDate = getNextYearDate()
    nextYear.value.newYear = getNextYear()
    return yearRemain
}

// 计算距离用户生日时间
const calcBirthday = () => {
    if (userInformation == null || userInformation.value == null || userInformation.value.birthday == null) {
        return -1
    }
    // 获取当年年份
    let year = dayjs().year()
    // 构造生日日期
    let birthday = year + '-' + userInformation.value.birthday.split('-')[1] + '-' + userInformation.value.birthday.split('-')[2]
    // 格式化为时间戳
    let birthdayjs = dayjs(birthday, 'YYYY-MM-DD')
    nextBirthDate.value = birthdayjs.format('YYYY年MM月DD日')
    // 生日开始时间
    let birthdayStart = birthdayjs.startOf('day')
    // 生日结束时间
    let birthdayEnd = birthdayjs.endOf('day')
    // 判断是否已经过了当年生日，如果过了，计算距离下一年生日
    if (dayjs().isAfter(birthdayEnd)) {
        birthdayjs = birthdayjs.add(1, 'year')
        birthdayStart = birthdayjs.startOf('day')
        birthdayEnd = birthdayjs.endOf('day')
        nextBirthDate.value = birthdayjs.format('YYYY年MM月DD日')
    }
    // 获取当前时间
    let now = dayjs()
    
    // 计算距离生日的天数
    let birthdayRemain = birthdayStart.diff(now, 'day') + 1
    return birthdayRemain
}

watch(userInformation, (newUserInformation, oldUserInformation) => {
    birthdayRemainDay.value = calcBirthday()
})

const birthdayRemainDay = ref(calcBirthday())
const nextBirthDate = ref("")

// 获取明年第一天日期
const getNextYearDate = () => {
    // 获取明年第一天日期
    let nextYear = dayjs().endOf('year').add(1, 'day').format('YYYY年MM月DD日')
    return nextYear
}
// 获取今年最后一天日期
const getThisYearDate = () => {
    // 获取今年最后一天日期
    let thisYear = dayjs().endOf('year').format('YYYY年MM月DD日')
    return thisYear
}

// 获取明年年份
const getNextYear = () => {
    // 获取明年年份
    let nextYear = dayjs().add(1, 'year').format('YYYY年')
    return nextYear
}

// 获取今日日期
const todayDate = ref(dayjs().format('YYYY年MM月DD日'))

// 获取今日节日或节气或农历
const todayMessage = () => {
    // 获取今日日期
    let today = dayjs().format('YYYY-MM-DD')
    let monDay = dayjs().format('MM-DD')
    // let today = "2024-12-25"
    let date = {
        day: today
    }
    let type = 0
    // 今日是否是周末 计1分
    // 获取今日星期几
    let weekday = dayjs().day()
    let isWeekend = weekday == 0 || weekday == 6
    if (isWeekend) {
        type = type + 1
    }
    // 今日是否为节日 计2分
    let isf = isFestival(date)
    if (isf) {
        type = type + 2
    }
    // 获取今日农历或节日
    let todayFes = solarToLunarMonthAndDay(date)
    
    // 构造节日信息
    todayFestival.value = {
        dayType: type,
        day: monDay,
        message: todayFes,
        weekday: weekday
    }
    console.log(todayFestival.value)
}

const weekdays = ref([
    '星期天',
    '星期一',
    '星期二',
    '星期三',
    '星期四',
    '星期五',
    '星期六'
])

const todayFestival = ref({
    dayType: 0,
    day: '',
    message: '',
    weekday: ''
})

const todayRemain = ref(Date.now() + calcToday() + 1)
const weekRemain = ref(Date.now() + calcWeek() + 1)
const yearRemain = ref(Date.now() + calcYear() + 1)

function reset() {
  value1.value = Date.now() + 1000 * 60 * 60 * 24 * 2
}

// 判断浏览用户当前登录用户是否一致
const isCurrentUser = () => {
    // 获取用户token 和 userStore 中的用户信息
    let token = getToken()
    let userInfo = userStore.userInfo
    let keys = Object.keys(userInfo)
    // 判断是否登录
    if (token == null && keys.length == 0) {
        return false
    }
    return userInfo.userId == route.params.userId
}

// 跳转到用户管理页面
const goUserMessageManage = () => {
    // 获取用户token 和 userStore 中的用户信息
    let token = getToken()
    let userInfo = userStore.userInfo
    let keys = Object.keys(userInfo)
    // 判断是否登录
    if (token == null && keys.length == 0) {
        showMessage('用户未登录，请先登录！', 'warning')
        return
    }
    router.push('/safeguard/user/person/center')
}

// 星期从周一开始
dayjs.locale('zh-cn');
 
// 是否节假日
function isFestival(slotData) {
  let solarDayArr = slotData.day.split('-');
  let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
 
  // 公历节日\农历节日\农历节气
  let festAndTerm = [];
  festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
  festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
  // festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
  festAndTerm = festAndTerm.join('')
 
  return festAndTerm != ''
}
// 公历转农历
function solarToLunar(slotData) {
  let solarDayArr = slotData.day.split('-');
  let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
 
  // 农历日期
  let lunarMD = "";
  if (lunarDay.IDayCn == "初一") {
    lunarMD = lunarDay.IMonthCn
  } else {
    lunarMD = lunarDay.IDayCn
  }

  // 公历节日\农历节日\农历节气
  let festAndTerm = [];
  festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
  festAndTerm.push(lunarDay.lunarFestival == null ? '' : ' ' + lunarDay.lunarFestival)
  festAndTerm.push(lunarDay.Term == null ? '' : ' ' + lunarDay.Term)
  festAndTerm = festAndTerm.join('')
 
  return festAndTerm == '' ? lunarMD : festAndTerm
}

// 公历转农历 月-日
function solarToLunarMonthAndDay(slotData) {
  let solarDayArr = slotData.day.split('-');
  let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
  // 农历日期
  let lunarMD = "";
  lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn

  // 公历节日\农历节日\农历节气
  let festAndTerm = []
  festAndTerm.push(lunarDay.festival == null? '' :'' + lunarDay.festival)
  festAndTerm.push(lunarDay.lunarFestival == null? '' :'' + lunarDay.lunarFestival)
  festAndTerm.push(lunarDay.Term == null? '' :'' + lunarDay.Term)
  festAndTerm = festAndTerm.join('')
  return  lunarMD + ' ' + festAndTerm
}

</script>

<style>
.is-selected {
  color: #1989fa;
}
</style>
 
<style scoped>
.el-col {
  text-align: center;
}

.countdown-footer {
  margin-top: 8px;
}

:deep(.el-calendar-day) {
  display: flex;
  justify-content: space-around;
  align-content: center;
  flex-wrap: wrap;
}
 

:deep(.el-calendar__body) {
  padding: 0;
}
/* 周末添加背景色 */
:deep(.el-calendar-table .current:nth-last-child(-n+2)) {
  background: var(--el-fill-color-light);
}
 
:deep(.el-button-group) {
  display: flex;
}
</style>